<%-- 
    Document   : firstpage
    Created on : Dec 10, 2011, 6:59:21 PM
    Author     : HoangLiem
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="model.Sanpham"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<link href="style/body.css" rel="stylesheet" type="text/css" />
<link href="style/first_page.css" rel="stylesheet" type="text/css"/>
<ul id="pagination2" class="pagination">
    <div id="productNavigate" style=" position:absolute; width: 10px; float:right; right:15px; top: 781px; z-index: 50;">
        <li onclick="slideshow2.pos(0)">o</li>
        <li onclick="slideshow2.pos(1)">o</li>
        <li onclick="slideshow2.pos(2)">o</li>
        <li onclick="slideshow2.pos(3)">o</li>
    </div>
</ul>
<div id="body_left">
    <div id="top_category" class="body_left">
        <h3>Top Category</h3>
        <ul>
            <li><a href="#">Laptop Computers</a></li>
            <li><a href="#">Destop Computers</a></li>
        </ul>
    </div>
    <div id="way_to_win" class="body_left">
        <h3>Way To Win</h3>
        <ul>
            <li><a href="#">Most Popular</a></li>
            <li><a href="#">Dollars Auction</a></li>
        </ul>
    </div>
    <div id="quick_link" class="body_left">
        <h3>Quick Link</h3>
        <ul>
            <li><a href="#">Component</a></li>
            <li><a href="#">Coins</a></li>
            <li><a href="#">Cell Phone</a></li>
            <li><a href="#">Destop Computers</a></li>
        </ul>
    </div>
    <div id="ads_choices" class="body_left">
        <h3>Ads Choise</h3>
        <ul>
            <li><a href="#">Diamond</a></li>
            <li><a href="#">Womens Diamond</a></li>
        </ul>
    </div>
    <div class="body_left_ads">
        <a href="#"><img src="images/acs_ads.png"/></a>
    </div>
    <div class="body_left_ads">
        <a href="#"><img src="images/acs_ads.png"/></a>
    </div>
</div>
<div id="body_main">
    <!--start 1-->
    <div id="body_main_1" class="body_main">
        <div id="body_main_1_letf">
            <div style="width:96%;" >

                <div id="slider" style="margin: 6px;" onmouseover="javascript:slideshow.pause()" onmouseout="javascript:slideshow.auto()">
                    <ul>
                        <li><img src="images/photos/sea-turtle.jpg" width="100%" height="300" alt="Sea turtle" /></li>
                        <li><img src="images/photos/coral-reef.jpg" width="100%" height="300" alt="Coral Reef" /></li>
                        <li><img src="images/photos/blue-fish.jpg" width="100%" height="300" alt="Blue Fish" /></li>
                        <li><img src="images/photos/blue-fish.jpg" width="100%" height="300" alt="Blue Fish" /></li>
                    </ul>
                </div>

            </div>
            <ul id="pagination" class="pagination5">
                <li onclick="slideshow.pos(0)"></li>
                <li onclick="slideshow.pos(1)"></li>
                <li onclick="slideshow.pos(2)"></li>
                <li onclick="slideshow.pos(3)"></li>
            </ul>
            <div style="width:100%;height:200px;margin-top:50px;background-color:#DDD;">
                <a href="#">Buy today</a>
            </div>
        </div>
        <script type="text/javascript">
            var slideshow=new TINY.slider.slide('slideshow',{
                id:'slider',
                auto:4,
                resume:true,
                vertical:false,
                navid:'pagination',
                activeclass:'current',
                position:0
            });
        </script>
        <div id="body_main_1_right">
            <div style="width:100%;background-color:brown;clear:both;"><h1><font color="white">TOP BID</font></h1></div>
            <div id="top_bid" class="top_bid">
                <div class="top_bid_item">
                    <div style="width:100%;">
                        <a href="#">Welcome to ibid, this is your bid</a>
                    </div>
                    <div>
                        <a href="#"><img src="images/dell.png"/></a>
                    </div>
                </div>
                <div class="top_bid_item">
                    <div>
                        <a href="#">Welcome to ibid, this is your bid</a>
                    </div>
                    <div>
                        <a href="#"><img src="images/dell.png"/></a>
                    </div>
                </div>
            </div>
            <div id="horizontal"><hr /></div>
        </div>
    </div>
    <!--end 1-->
    <!--start 2-->
    <div class="body_main_title"><h1><font color="white">Closing Bid</font></h1></div>
    <div style="background-color:brown;width:750px;height:40px;position:absolute;top:830px;; right:0px; z-index:9;">
        <h1><font color="white">Today Bids</font></h1>
    </div>

    <div id="body_main_2" class="body_main">
        <div>
            <div id="container">
                <div id="sliderSP" onmouseover="javascript:slideshow2.pause()" onmouseout="javascript:slideshow2.auto()">
                    <ul>
                        <c:forEach var="i" begin="0" end="3" step="1">
                        <li>
                            <div id="closing_bid" class="items">
                                <c:forEach var="j" begin="0" end="3" step="1">
                                <div class="item">
                                    <div>
                                        <a href="#"><img width="120px" height="120px" src="images/productImages/${DSHinhAnh[(i*3)+j][0].tenHinhAnh}"/></a>
                                    </div>
                                    <div>
                                        <a href="#">${dsClosingBid[(i*3)+j].tenSanPham}</a>
                                    </div>
                                </div>
                                </c:forEach>
                            </div>

                            <div id="today bid" class="items">
                                <c:forEach var="k" begin="1" end="4" step="1">
                                <div class="item">
                                    <div>
                                        <a href="#"><img src="images/dell.png"/></a>
                                    </div>
                                    <div>
                                        <a href="#">Welcome to ibid, this is your bid</a>
                                    </div>
                                </div>
                                </c:forEach>
                            </div>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var slideshow2=new TINY.slider.slide('slideshow2',{
                id:'sliderSP',
                auto:5,
                resume:true,
                vertical:true,
                navid:'pagination2',
                activeclass:'current',
                position:0
            });
        </script>
    </div>
    <!--end 2-->
    <!--start 3 -->
    <div id="body_main_3" class="body_main">
        <div class="body_main_title"><h1><font color="white">BEST SELLERS</font></h1></div>
        <div id="best_seller" class="items">
            <div class="item">
                <div>
                    <a href="#"><img src="images/dell.png"/></a>
                </div>
                <div>
                    <a href="#">Welcome to ibid, this is your bid</a>
                </div>
            </div>
            <div class="item">
                <div>
                    <a href="#"><img src="images/dell.png"/></a>
                </div>
                <div>
                    <a href="#">Welcome to ibid, this is your bid</a>
                </div>
            </div>
            <div class="item">
                <div>
                    <a href="#"><img src="images/dell.png"/></a>
                </div>
                <div>
                    <a href="#" style="left:0px; padding:10px;">Welcome to ibid, this is your bid</a>
                </div>
            </div>
            <div class="item">
                <div>
                    <a href="#"><img src="images/dell.png"/></a>
                </div>
                <div>
                    <a href="#">Welcome to ibid, this is your bid</a>
                </div>
            </div>
        </div>
    </div>
    <!--end 3 -->
    <div id="body_main_4" style="width:100%;clear:both;height:50px;background-color:#DDD;">
        <a href="#">Các link liên kết khác</a>
    </div>
</div>
